<template>
  <el-container>
    <el-header class="no-flex" height="auto">
      <el-form ref="formRef" label-width="70px" inline  >
        <el-form-item label="公告标题" prop="title" >
          <el-input placeholder="请输入公告标题" clearable  style="width:200px"  v-model="searchForm.title"/>
        </el-form-item>
        <el-form-item label="公告类型" prop="type" >
          <el-select placeholder="请选择公告类型" clearable v-model="searchForm.type" style="width:200px">
            <el-option v-for="item in dicts.system_notice_type" :key="item.v" :label="item.k" :value="item.v"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="enabled" >
          <el-select placeholder="请选择启用状态" clearable v-model="searchForm.enabled" style="width:200px">
            <el-option v-for="item in dicts.system_global_status" :key="item.v" :label="item.k" :value="item.v"/>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button type="primary"  icon="el-icon-search" @click="getNotice()">搜索</el-button>
          <el-button  icon="el-icon-refreshRight" @click="noticeReset">重置</el-button>
        </el-form-item>
        <el-form-item style=" display: flex; margin-bottom: 0;" >
          <el-button type="primary" icon="el-icon-plus" @click="noticeAdd" v-auths="['*:*:*','system:notice:add']">新增</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main class="nopadding">
      <el-table :data="tableData" height="auto" border
                paginationLayout="total, prev, pager, next" hideDo>
        <el-table-column align="center" type="selection"/>
        <el-table-column prop="title" label="公告标题" width="500px" />
        <el-table-column label="公告类型" prop="type" align="center">
          <template #default="{row}">
            <template v-for="item in dicts.system_notice_type">
              <el-tag v-if="row.type == item.v">{{item.k}}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="启用状态"  prop="enabled" align="center">
          <template #default="{row}">
            <template v-for="item in dicts.system_global_status">
              <el-tag v-if="row.enabled == item.v">{{item.k}}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="rendererDateTime" width="150" />
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template #default="{ row }">
            <div class="sys-table-main-actions">
              <el-link
                v-auths="['*:*:*','system:notice:update']"
                icon="el-icon-edit"
                type="primary"
                :underline="false"
                @click="noticeUpdate(row)"
              >
                修改
              </el-link>
              <el-link
                v-auths="['*:*:*','system:notice:delete']"
                style="margin-left: 10px"
                icon="el-icon-delete"
                type="danger"
                :underline="false"
                @click="noticeDel(row)"
              >
                删除
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="display: flex; justify-content: flex-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :total="searchForm.total"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="searchForm.current"
        :page-size="searchForm.size"
      />
    </el-footer>
<!--    富文本弹框-->
    <notice-editor-dialog
      ref="editorDialog"
      @confirm="getNotice"
    />
  </el-container>
</template>

<script>

import NoticeEditorDialog from "./components/NoticeEditorDialog.vue";

export default {
  name: "index",
  components: { NoticeEditorDialog },
  dicts: ['system_notice_type','system_global_status'],
  data(){
    return{
      ids:[],//选中数组
      searchForm: {
        current:1,
        size:10,
        total:0,
        title: '',
        type: null,
        enabled: null
      }, //表单
      tableData: [],
      formData:{}
    }
  },
  created() {
    this.getNotice()
  },
  methods:{
    getNotice(){
      this.$API.system.notice.list.get(this.searchForm).then((res)=>{
        this.tableData = res.data.records
        this.searchForm.total = res.data.total
        this.searchForm.current = res.data.current
        this.searchForm.size = res.data.size
      })
    },
    // 转换时间
    rendererDateTime(row, column, cellValue,index){
      return this.$TOOL.dateFormat(cellValue)
    },
    //重置
    noticeReset(){
      this.$refs.formRef.resetFields();
      this.searchForm = {}
      this.getNotice()
    },
    //+
    noticeAdd(){
      this.$nextTick(()=>{
        this.$refs.editorDialog.open('add').setData()
      })
      this.$refs.editorDialog.dialogFormVisible = true
    },
    //update
    noticeUpdate(notice){
      this.$nextTick(()=>{
        this.$refs.editorDialog.open('edit').setData(notice.id)
      })
      this.$refs.editorDialog.dialogFormVisible = true

    },
    //删除
    noticeDel(notice){
      this.$confirm('此操作将删除此条公告,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$API.system.notice.delete.get(notice.id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getNotice()
      })
    },
    //页码
    handleSizeChange(val) {
      this.searchForm.size = val
      this.getNotice()
    },
    handleCurrentChange(val) {
      this.searchForm.current = val
      this.getNotice()
    },
    // 选中的数组(批量)
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
  }
}
</script>

<style scoped>

</style>
